<template>
  <el-descriptions :title="title" :column="column" border>
    <el-descriptions-item v-for="item in list" :span="item.span">
      <template #label>{{ item.label }}</template>
      <slot :name="item.prop" :rows="row">
        {{ item.value || row[item.prop] }}
      </slot>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue';

interface DetailItem {
  prop: string;
  label: string;
  span?: number;
  value?: any;
}

const props = defineProps({
  data: {
    type: Object as PropType<{
      row: Record<string, any>;
      list: DetailItem[];
      title?: string;
      column?: number;
    }>,
    required: true,
  },
});

const { row, title, column = 2, list } = props.data;
</script>